<template>
  <div id="container" class="mt-5">

    <div class="dataImage ml-auto" ref="downloadImage">
      <div class="tickt-body">
        <table border="1">
          <!--  送货单  1行（2行组成） -->
          <tr>
            <td rowspan="2" colspan="5" class="myclass-1">送货单
<!--              <span style="color: red">made by 林凯</span>-->
            </td>
            <td colspan="3" class="myclass-2">No：88886666</td>
          </tr>
          <tr>
<!--            <td class="myclass-1" colspan="3"></td>-->
          </tr>

          <!-- 客户相关信息 2 行 -->
          <tr class="myclass-3">
            <td colspan="4">客户名称</td>
            <td colspan="2">客户电话</td>
            <td colspan="2">制单人员</td>
          </tr>
          <tr class="myclass-3">
            <td colspan="4">客户名称</td>
            <td colspan="2">客户电话</td>
            <td colspan="2">制单人员</td>
          </tr>

          <!--  表格主体 10行  -->
          <tr>
            <td>序号</td>
            <td class="myclass-4">产品名称</td>
            <td class="myclass-4">规格型号</td>
            <td>单位</td>
            <td>数量</td>
            <td>单价</td>
            <td>金额</td>
            <td>备注</td>
          </tr>

          <tr>
            <td>1</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>2</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>3</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>4</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>5</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>6</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>7</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>8</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="8" class="myclass-3">合计金额（大写）</td>
          </tr>
          <tr>
            <td class="myclass-3" colspan="8">注：以上货品请核对数量，如有质量问题，请在收货后3天内通知本公司，逾期舒不负责</td>
          </tr>

          <tr>
            <td class="myclass-3" colspan="4">送货单位及经手人（盖章）：</td>
            <td class="myclass-3" colspan="4">收货单位及经手人（盖章）：</td>
          </tr>
          <tr></tr>
          <tr></tr>

        </table>
      </div>
    </div>

    <img class="big" :src="dataURL">
    <button class="test" @click="toImage">截图</button>

  </div>
</template>

<script>

  import html2canvas from 'html2canvas'

  /*
    参考：https://blog.csdn.net/xiaozhuge_S/article/details/103186559
  */

  export default {
    name: 'TicketImage',
    mounted () {
      // this.draw()
    },
    data () {
      return {
        dataURL: ''
      }
    },
    methods: {
      toImage () {
        let myobj = this.$(".tickt-body")[0];
        html2canvas(myobj, {
          backgroundColor: null,  //取消图片白边问题
          useCORS: true,  //如果是动态加载的图片 获取图片
        }).then((canvas) => {

          var context = canvas.getContext('2d');
          // 【重要】关闭抗锯齿，进一步优化清晰度
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;

          let dataURL = canvas.toDataURL('image/jpg')
          this.dataURL = dataURL
        })
      }
    }
  }
</script>

<style scoped>

  body {
    background-color: white;
  }

  .tickt-body {
    width: 900px;
    margin: 0 auto;
    background-color: white;
    padding: 50px;
  }

  table {
    text-align: center;
    width: 800px;
    background-color: white;

  }

  /*  对表格的一些样式进行微调  */

  .myclass-1 {
    font-size: 24px;
  }

  .myclass-2 {
    height: 60px;
  }

  .myclass-3 {
    text-align: left;
  }

  .myclass-4 {
    width: 210px;
  }

  tr {
    /*height: 30px;*/
  }

</style>
